<template>
	<view class="">
		<u-form :model="form" ref="uForm" label-position="top" style="background-color: #FFF;">
			<u-form-item label="设置新密码" prop="pwd" style="padding: 20rpx;">
				<u-input maxlength=8 type="password" placeholder='请设置6位数字密码' v-model="form.pwd"
					placeholder-style="font-size:24rpx" />
			</u-form-item>
			<u-form-item label="再次确认密码" prop="newpwd" style="padding: 20rpx;">
				<u-input maxlength=8 type="password" placeholder='请设置6位数字密码' v-model="form.newpwd"
					placeholder-style="font-size:24rpx" />
			</u-form-item>
			<!-- <u-form-item label="验证码" prop="code" style="padding: 20rpx;" borderBottom>
				<u-input v-model="form.code" placeholder="请填写验证码"></u-input>
				<u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini" :disabled="disabled1">获取验证码</u-button>
			</u-form-item> -->
			<u-form-item :label-position="labelPosition" label="验证码" prop="code" style="padding: 20rpx;" label-width="150">
				<u-input  placeholder="请输入验证码" v-model="form.code" type="password"></u-input>
				<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
			</u-form-item>
			<!-- <u-form-item label="验证码" prop="code" style="padding: 20rpx;">
				<u-input maxlength=8 type="password" placeholder='请输入6位验证码' v-model="form.code"
					placeholder-style="font-size:24rpx" />
			</u-form-item> -->
		</u-form>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<view class="">
			
		</view>
		<view class="ouaccount" @click="submit">
			<view class="ouaccount_text">
				确认
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition: 'left',
				disabled1: false,
				tips: '',
				form: {
					pwd: '',
					newpwd: '',
					code: ''
				},
				codeTips: '',
				rules: {
					pwd: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					newpwd: [{
						required: true,
						message: '请再次确认密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		methods: {
			codeChange(text) {
				this.codeTips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.$http('api/login/sendCode', {
							phone: uni.getStorageSync('phone'),
							type: 3
						}, 'POST').then(res => {
							console.log(res);
						})
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.$http('api/user/updatePayPassword',{
							password:this.form.pwd,
							password_re:this.form.newpwd,
							code: this.form.code,
						}).then(res => {
							uni.showToast({
								title:'密码设置成功',
								icon:'success'
							})
							setTimeout(function(){
								uni.navigateTo({
									url:'./editUser'
								})
							},1000)
						});
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>
<style lang="less" scoped>
	.ouaccount {
		width: 90%;
		height: 100rpx;
		background-color: #000;
		border-radius: 20rpx;
		position: fixed;
		bottom: 40rpx;
		left: 40rpx;

		.ouaccount_text {
			color: #FFF;
			text-align: center;
			line-height: 100rpx;
			font-size: 24rpx;
			font-weight: 600;
		}
	}
</style>
